<template>
  <div>
    <ul>
      <li
        v-for="item in orderList.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )"
        :key="item.ord_num"
      >
        <p class="title">
          <span> 订单编号：{{ item.ord_num }}</span> 下单时间：{{ item.time }}
        </p>
        <div class="table">
          <div class="img">
            <img src="" alt="" />
            <p>商品名称{{ item.game }}</p>
          </div>
          <div class="game">
            <div>
              <p>游戏名称：{{ item.game }}</p>
              <p>区服：{{ item.game_area }}</p>
              <p>账号：{{ item.game_num }}</p>
            </div>
          </div>
          <div class="tab_detail">
            <div>
              <p>客户昵称：{{ item.username }}</p>
              <p>电话：{{ item.tel }}</p>
              <p>下单类型：</p>
            </div>
          </div>
          <div class="money">
            <div>
              <p class="money_num">￥{{ item.price }}*{{ item.num }}</p>
              <p>{{ item.pay_method }}</p>
            </div>
          </div>
          <div class="set">
            <div>
              <p v-if="item.state === 0">等待买家付款</p>
              <p v-if="item.state === 2">等待商家处理</p>
              <p @click="detail(item.ord_num)"><span class="ord_detail">订单详情</span></p>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapState } = createNamespacedHelpers("order");
export default {
  created() {},
  methods: {
    detail(val) {
      this.$router.push(`listdetail/${val}`);
    },
  },
  computed: {
    ...mapState({
      orderList: (state) => state.orderList,
      currentPage: (state) => state.currentPage,
      pageSize: (state) => state.pageSize,
    }),
  },
};
</script>

<style scoped>
.table {
  display: flex;
}
.title {
  border: 1px solid lightgray;
  padding: 10px 0;
  background: #00b79e;
  color: white;
}
.table > div {
  width: 20%;
  border: 1px solid lightgray;
  border-collapse: collapse;
  font-size: 12px;
  padding: 20px 0;
}
.img {
  text-align: center;
}
.img img {
  width: 100px;
  height: 100px;
}
li {
  margin: 20px 0;
}
.set span {
  cursor: pointer;
}
.ord_detail {
  color: blue;
}
.money,
.game,
.tab_detail,
.set {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 20px;
}
.money_num {
  color: red;
}
</style>
